<template>
    <div class="project-info-layout">
      <div v-if="isSearch" class="search-content">
        <dialog-search-view @callback="onSearch"/>
          <ul class="project-list">
              <folder-view :data="searchFolderList" @callback="nextLevelProject" :type="1"/>
              <file-view :data="searchFileList" @callback="nextLevelProject" :type="1"/>
          </ul>
      </div>
      <div v-else>
        <header-view>
          <img src="../../../assets/image/back.png" alt="" class="icon" @click="goBack">
          <div class="title">
            <div class="circle">{{info && info.name.substring(0,1)}}</div>
            <div class="title-text">{{info && info.name}}</div>
          </div>
          <img src="../../../assets/image/search.png" alt="" class="icon" @click.stop="isSearch = true">
        </header-view>
        <div class="content">
          <div class="sort" @click.stop="isShowDrop = !isShowDrop">
            <img :src="isShowDrop?require('../../../assets/image/drop-up.png'): require('../../../assets/image/drop-down.png')" class="icon-22" alt="">
            <span class="font sort-title">{{sortTitle}}</span>
          </div>
          <ul class="project-list">
              <folder-view :data="folderList" @callback="nextLevelProject" @showMore="showMore"/>
              <file-view :data="fileList" @callback="nextLevelProject" @showMore="showMore"/>
          </ul>
        </div>
        <tabbar></tabbar>
      </div>
        <!--排序-->
      <div class="drop-layout" v-if="isShowDrop">
        <dialog-drop-view :data="dropMenu"/>
      </div>
        <!--更多-->
      <div class="drop-layout" v-if="isShowMore">
          <dialog-show-more :data="optionForm" />
      </div>
        <div v-if="isShowOption">
            <option-view
                    :isShowShareUser="isShowShareUser"
                    :isShowEdit="isShowEdit"
                    :isShowConfirm = 'isShowConfirm'
                    :data="optionForm"
                    ref="option"
            />
        </div>
        <!--新建-->
      <div class="drop-layout" v-if="isShowAdd">
        <ul class="drop-dialog">
          <div class="drop-item" @click.stop="">
            <img src="../../../assets/image/no-add-project.png" alt="">
            <span style="opacity: 0.7;" class="font-large">新建项目</span>
          </div>
          <div class="drop-item" @click.stop="onShowAddFolder">
            <img src="../../../assets/image/add-folder.png" alt="">
            <span style="opacity: 0.7;" class="font-large">新建文件夹</span>
          </div>
          <div class="drop-item" @click.stop="onShowAddFile">
            <img src="../../../assets/image/add-file.png" alt="">
            <span style="opacity: 0.7;" class="font-large">新建文档</span>
          </div>
        </ul>
      </div>
      <div class="drop-layout" v-if="isShowAddFolder">
        <dialog-add-view @callback="addFolder" :dialogTitle="folderName"/>
      </div>
      <div class="drop-layout" v-if="isShowAddFile">
        <dialog-add-view @callback="addFile" :dialogTitle="fileName"/>
      </div>

    </div>
</template>

<script>
    import DialogDropView from '../../common/DialogDropView';
    import HeaderView from '../../common/HeaderView';
    import DialogAddView from '../../common/DialogAddView';
    import Tabbar from '../../common/Tabbar'
    import DialogSearchView from '../../common/SearchView';
    import FileView from './FileView';
    import FolderView from './FolderView';
    import DialogShowMore from './DialogShowMore';
    import OptionView from './OptionView'

    import { fileNodeAdd } from '../../../api/file'
    import { folderAdd, folderChildren } from '../../../api/folder'
    import { folderJudge1, fileJudge1 } from './judge'

    export default {
        name: 'ProjectItemView',
        components: {
            DialogDropView,
            HeaderView,
            DialogAddView,
            Tabbar,
            DialogSearchView,
            FileView,
            FolderView,
            DialogShowMore,
            OptionView
        },
        data() {
            return {
                info: null,
                sortTitle: '按更新时间排序',
                isShowDrop: false,
                dropMenu: this.global.dropMenu,
                fileList: [],
                folderList: [],
                isShowMore: false,
                optionForm: null,
                isOpenEdit: false,
                isShowShareUser: false,
                folderId: null,
                searchInput: '',
                isShowEdit: false,
                currentIndex: 1,
                isShowAdd: false,
                isShowAddFolder: false,
                projectName: sessionStorage.projectName,
                isShowAddFile: false,
                folderName: '文件夹名称',
                fileName: '文档名称',
                isShowConfirm: false,
                isSearch: false,
                level: 0,
                searchFolderList: [],
                searchFileList: [],
                isShowOption: false,
            }
        },
        mounted() {
            // console.log(this.$route.params.info)
            this.info = this.$route.params.info ? this.$route.params.info : JSON.parse(sessionStorage.info);
            console.log(this.info)
            this.getFileList(this.level, '', 'position')
            document.addEventListener('click', () => {
                if(this.isShowMore)
                    this.isShowMore = false;
                if(this.isShowShareUser)
                    this.isShowShareUser = false;
                if(this.isShowDrop)
                    this.isShowDrop = false;
                if(this.isSearch)
                    this.isSearch = false;
            })
        },
        computed: {
            authority() {
                return this.$store.state.index.authority
            },
            isEdit() {
                const realname = JSON.parse(localStorage.getItem('userInfo')).realName
                return this.optionForm !== null
                    ? this.optionForm.suffix && this.optionForm.suffix.includes('html')
                        ? this.optionForm.editor === realname
                            ? 1
                            : 2
                        : 3
                    : ''
            },
        },
        watch: {
            currentIndex(val) {
                // console.log(val)
                this.$router.push({name: 'index', params: {index: val}})
            }
        },
        methods: {
            onSearch(name) {
                // this.getFileList(1,name)
                this.folderId = this.info.id ? this.info.id : this.folderId;
                folderChildren(1, name, this.folderId, '', 1, 200)
                    .then(result => {
                        console.log(result)
                        const { data } = result;
                        this.searchFileList = data.fileInfos;
                        this.searchFolderList = data.foldInfos;
                    })
                    .catch(err => {
                        console.log(err)
                    })
            },
            nextLevelProject(d) {
                // console.log(d)
                if(d.level) {
                    this.info = d;
                    this.getFileList()
                } else {
                  // this.aaa(d)
                    this.$router.push({name: 'fileContent', params: {info: d, type: 'file'}})
                    // this.$router.push({name: 'demo', params: {info: d, type: 'file'}})
                }
            },
            getFileList(level, name, sort) {
                this.folderId = this.info.id ? this.info.id : this.folderId;
                /*fileList(this.folderId, sort, this.searchInput)
                    .then(result => {
                        const { data } = result;
                        this.fileList = data.fileInfos;
                        this.info.children.forEach(d => {
                            this.fileList.push(d)
                        });
                        this.fileList.forEach(item => {
                            item.name = item.suffix ? item.name.replace('.' + item.suffix, '') : item.name
                        });
                        this.$store.commit('index/set_selectedFile', { suffix: '' })
                        // console.log(this.fileList)
                    })
                    .catch(err => {
                        console.log(err)
                    })*/
                folderChildren(level = 0, name = '', this.folderId, sort, 1, 200)
                    .then(result => {
                        console.log(result)
                        const { data } = result;
                        this.fileList = data.fileInfos;
                        this.folderList = data.foldInfos;
                    })
                    .catch(err => {
                        console.log(err)
                    })
            },
            goBack() {
                // if(this.info.level === 0) {
                    this.$router.push({name: 'projectFolder',params: {index: 1}})
                // } else {
                    // this.info = d;
                // }
            },
            showMore(d) {
                this.isShowMore = true;
                this.optionForm = d;
                console.log(this.optionForm)
            },
            //添加文件夹
            onShowAddFolder() {
                this.isShowAddFolder = true;
                this.isShowAdd = false;
            },
            async addFolder(type,name) {
                if (type === '2' && name === '') {
                    return;
                }
                if(type === '1') {
                    this.isShowAddFolder = false;
                    this.isShowAdd= false;
                }else {
                    const parentId = this.info ? this.info.parentId : 0;
                    const is = await folderJudge1(parentId, name);
                    if(is)
                        this.folderAdd(name)
                }

            },
            folderAdd(content) {
                if (this.info !== null && this.info.isUpdate === 0) {
                    this.$toast('无操作权限')
                    return false
                }
                const name = content
                const parentId = this.info ? this.info.id : 0
                let level = this.info ? this.info.level : -1
                level++
                folderAdd(parentId, name, level)
                    .then(result => {
                        const { data } = result
                        this.folderList.push(data)
                        this.$forceUpdate()
                        this.$toast('添加成功')
                        this.isShowAddFolder = false;
                    })
                    .catch(err => {
                        // this.instanceReset()
                        console.log(err)
                    })
            },
            //添加文档
            onShowAddFile() {
                // this.$router.push({name: 'createFile'})
              this.isShowAddFile = true;
              this.isShowAdd = false;
            },
            async addFile(type, name) {
              if (type === '2' && name === '') {
                return;
              }
              if(type === '1') {
                this.isShowAddFile = false;
                this.isShowAdd= false;
              }else {
                const parentId = this.info ? this.info.id : 0;
                const is = await fileJudge1(parentId, this.name);
                if(is)
                  this.fileAdd(name)
              }
            },
            fileAdd(name) {
              // const name = this.name
              const folderId = this.info.id
              fileNodeAdd(folderId, name)
                  .then(result => {
                    // console.log(result)
                    const { data } = result
                    this.fileList.unshift(data)
                    this.$forceUpdate()
                    this.$toast('添加成功')
                    this.isShowAddFile = false;
                    this.$router.push({name: 'createFile',params: {selectedFile: data}})
                  })
                  .catch(err => {
                    console.log(err)
                  })
            },
            onShareFile() {
                this.isShowMore = false;
                this.isShowOption = true;
                this.isShowShareUser = true;
            },
            onEdit() {
                this.isShowEdit = true;
                this.isShowOption = true;
                this.isShowMore = false;
                this.isShowShareUser = false;
            },

            //删除
            onDelete() {
              this.isShowConfirm = true;
              this.isShowOption = true;
              this.isShowMore = false;
            },

            //释放权限
            cancleDdit() {
                this.isShowOption = true;
                this.isShowMore = false;
                this.$nextTick(() => {
                    this.$refs.option.cancleDdit();
                })
            },
            applyDdit() {
                this.isShowOption = true;
                this.isShowMore = false;
                this.$nextTick(() => {
                    this.$refs.option.applyDdit();
                })
            }
        }
    }
</script>

<style scoped>
    .project-info-layout {
        margin-bottom: 100px;
    }
    .search-content {
      background: #F5F8FB;
      min-height:100vh;
      margin-top: 135px;
    }
    .content {
        background: #F5F8FB;
        min-height: 82vh;
        /*overflow-y: scroll;*/
        margin-top: 135px;
    }
    .sort {
        height: 70px;
        background: #fff;
        padding: 0 40px;
        text-align: center;
        display: flex;
        align-items: center;
        margin-bottom: 6px;
        position: relative;
        z-index: 9998;
    }
    .sort-title {
        font-size: 24px;
        color: #484848;
        opacity: .8;
        margin-left: 20px;
    }
    .project-list {
        padding: 0 25px;
    }
    .drop-layout {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: rgba(0,0,0,.3);
        z-index: 9999;
    }
    /*新建*/
    .drop-dialog {
        width: 700px;
        height: 300px;
        background: #F9F7F7;
        border-radius: 40px 40px 0 0;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        padding: 10px 15px 110px;
        overflow-y: auto;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .drop-item {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
    }

    .drop-item img {
      width: 120px;
      height: 120px;
    }
</style>